<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <h1 class="logo" data-i18n="nav.logo">我的作品集</h1>
            <div class="nav-container">
                <ul class="nav-links">
                    <li><a href="#about" data-i18n="nav.about">关于我</a></li>
                    <li><a href="#projects" data-i18n="nav.projects">项目作品</a></li>
                    <li><a href="#skills" data-i18n="nav.skills">技能特长</a></li>
                    <li><a href="#contact" data-i18n="nav.contact">联系方式</a></li>
                </ul>
                <!-- 语言切换按钮 -->
                <div class="language-switch">
                    <button id="lang-zh" class="lang-btn active">中</button>
                    <button id="lang-en" class="lang-btn">EN</button>
                </div>
                
                <!-- 深色/浅色模式切换按钮 -->
                <button id="theme-toggle" class="theme-toggle">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header class="hero">
        <div class="container">
            <h2 data-i18n="hero.title">你好，我是<span id="name">Hita</span></h2>
            <p data-i18n="hero.subtitle">一名充满创造力的<span id="profession">Python Developer</span></p>
            <a href="#projects" class="btn" data-i18n="hero.button">查看我的作品</a>
        </div>
    </header>

    <!-- 关于我 -->
    <section id="about" class="about">
        <div class="container">
            <h2 data-i18n="about.title">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://kirineko.github.io/hita.png" alt="个人照片" class="profile-img">
                </div>
                <div class="about-text">
                    <p data-i18n="about.p1">欢迎来到我的个人作品集网站！我是一名热情且经验丰富的Python Developer，专注于消息中间件、实时数据处理、高可用架构设计。</p>
                    <p data-i18n="about.p2">我拥有多年的相关工作经验，在分布式系统和大数据处理方面有着深入的研究和实践。我热爱Rust、幸运星、孤独摇滚和摇曳露营，并将这种热情融入到我的每一个项目中。</p>
                    <p data-i18n="about.p3">我的设计理念是追求极致的性能和稳定性，我相信优秀的系统架构应该既能应对高并发场景，又能保持良好的可维护性。</p>
                </div>
            </div>
            
            <!-- 专业经历时间线 -->
            <div class="timeline">
                <h3 data-i18n="timeline.title">专业经历</h3>
                <div class="timeline-items">
                    <div class="timeline-item">
                        <div class="timeline-date">2010-2014</div>
                        <div class="timeline-content">
                            <h4 data-i18n="timeline.tsinghua">清华大学</h4>
                            <p data-i18n="timeline.tsinghua.desc">计算机科学与技术 本科</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2014-2016</div>
                        <div class="timeline-content">
                            <h4 data-i18n="timeline.stanford">斯坦福大学</h4>
                            <p data-i18n="timeline.stanford.desc">计算机科学 硕士</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2017-2020</div>
                        <div class="timeline-content">
                            <h4 data-i18n="timeline.google">Google</h4>
                            <p data-i18n="timeline.google.desc">软件工程师</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2021-2023</div>
                        <div class="timeline-content">
                            <h4 data-i18n="timeline.openai">OpenAI</h4>
                            <p data-i18n="timeline.openai.desc">软件工程师</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 个人成就 -->
            <div class="achievements">
                <h3 data-i18n="achievements.title">个人成就</h3>
                <div class="achievement-tags">
                    <span class="achievement-tag" data-i18n="achievements.tag1">清华大学优秀毕业生</span>
                    <span class="achievement-tag" data-i18n="achievements.tag2">微软MVP</span>
                    <span class="achievement-tag" data-i18n="achievements.tag3">华为开发者认证</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目作品 -->
    <section id="projects" class="projects">
        <div class="container">
            <h2 data-i18n="projects.title">项目作品</h2>
            <div class="project-grid">
                <!-- 项目1 -->
                <div class="project-item">
                    <img src="https://picsum.photos/id/239/600/400" alt="项目1">
                    <h3>项目名称 1</h3>
                    <p>这是一个[项目类型]项目，主要功能包括[主要功能]。</p>
                    <a href="#" class="project-link" data-i18n="projects.view">查看详情</a>
                </div>
                
                <!-- 项目2 -->
                <div class="project-item">
                    <img src="https://picsum.photos/id/240/600/400" alt="项目2">
                    <h3>项目名称 2</h3>
                    <p>这是一个[项目类型]项目，主要功能包括[主要功能]。</p>
                    <a href="#" class="project-link" data-i18n="projects.view">查看详情</a>
                </div>
                
                <!-- 项目3 -->
                <div class="project-item">
                    <img src="https://picsum.photos/id/241/600/400" alt="项目3">
                    <h3>项目名称 3</h3>
                    <p>这是一个[项目类型]项目，主要功能包括[主要功能]。</p>
                    <a href="#" class="project-link" data-i18n="projects.view">查看详情</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 技能特长 -->
    <section id="skills" class="skills">
        <div class="container">
            <h2 data-i18n="skills.title">技能特长</h2>
            <div class="skills-grid">
                <div class="skill-item">
                    <div class="skill-name">Python</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 95%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <div class="skill-name">MongoDB</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 90%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <div class="skill-name">Next.js</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 80%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <div class="skill-name">ElasticSearch</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 75%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <div class="skill-name">Rust</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 60%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 data-i18n="contact.title">联系方式</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <p><strong data-i18n="contact.email">邮箱：</strong><a href="mailto:kirineko@qq.com">kirineko@qq.com</a></p>
                    <p><strong data-i18n="contact.website">个人网页：</strong><a href="https://kirineko.github.io" target="_blank">kirineko.github.io</a></p>
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name" data-i18n="contact.form.name">姓名：</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email" data-i18n="contact.form.email">邮箱：</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="message" data-i18n="contact.form.message">留言：</label>
                            <textarea id="message" name="message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="btn" data-i18n="contact.form.submit">发送消息</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p data-i18n="footer.copyright">&copy; 2023 Hita. 保留所有权利。</p>
        </div>
    </footer>

    <script type="module">
        // 动态加载language.js和main.js
        import languages from './language.js';
        window.languages = languages;
        
        // 创建script标签加载main.js
        const mainScript = document.createElement('script');
        mainScript.src = './main.js';
        mainScript.onload = function() {
            // 初始设置语言
            if (window.initializeTranslations) {
                window.initializeTranslations();
            }
        };
        document.body.appendChild(mainScript);
    </script>
</body>
</html>